<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jq火箭升空</title>
</head>
<style>
    .web {
        height: 10000px;
    }

    .rocket {
        width: 149px;
        height: 249px;
        background-image: url(./4.png);
        position: fixed;
        top: 70%;
        right: 20px;
        /* display: none; */
    }

    .rocket:hover {
        background-position-x: -100%;
    }

    .rocket_run {
        animation: rocket_run .2s infinite steps(4, end);
    }

    @keyframes rocket_run {
        0% {
            background-position: -200%;
        }

        100% {
            background-position: -600%;
        }
    }
</style>

<body>
    <div class="web">
        <div class="rocket"></div>
    </div>
    <script src="./jq_3.4.1.js"></script>
    <script>
        var jq_rocket = $(".rocket"),
            rocket_v, scroll_v, num, scroll_now;

        //判断滚动条有300px 出现火箭
        $(document).scroll(function () {
            ($(document).scrollTop() < 300 || $(document).scrollTop() == 0) ? jq_rocket.css("display", "none") : jq_rocket.css("display", "block");
        })
        //火箭每20ms走的路程
        rocket_v = (parseInt(jq_rocket.css("top")) + parseInt(jq_rocket.css("height"))) / 50;

        jq_rocket.on("click", function () {
            jq_rocket.addClass("rocket_run");
            //滚动条每20ms走的路程
            scroll_v = $(document).scrollTop() / 50;

            scroll_now = $(document).scrollTop() * 0.08;
            console.log(scroll_now);

            time = setInterval(() => {
                jq_rocket.css("top", function (index, val) {
                    //路程剩余小于8%时候 加快火箭
                    ($(document).scrollTop() < scroll_now) && (rocket_v + 600);
                    return parseInt(val) - rocket_v;
                })
                num = $(document).scrollTop() - scroll_v;
                $(document).scrollTop(num);
                ($(document).scrollTop() == 0) && (clearInterval(time));
                // console.log(1)
            }, 20);
        })

    </script>
</body>

</html>